<form method="post">
    <div style="margin: 10px 20px 30px 0px">
        {#  csrf_token的本质作用就是混淆发送给后端的参数#}
        {{form.csrf_token}}
    主机名：{{form.tag_id}}
         ip地址：{{form.ip}}
    {{form.submit}}
</div>
</form>
    <script>
        function selected() {
        var obj = document.getElementById("tag_id"); //定位id
        var index = obj.selectedIndex; // 选中索引
        var text = obj.options[index].text; // 选中文本
        var value = obj.options[index].value; // 选中值
        document.getElementById("ip").value=value;
        document.cookie="ip="+value
        document.cookie="host="+text
        disk(text,value)
    }
</script>
 <div id="container" style="height: 400px; min-width: 310px"></div>

<script>
 function disk(host,ip) {
      $(function () {
          Highcharts.setOptions({
              global: {
                  useUTC: true
              }
          });
          $.getJSON('/disk', function (data) {
              var free = data.free
              var total = data.total
              var data1 = new Array();
              for (var i = 0; i < free.length; i++) {
                      data1.push(free[i][2])
              }

              $('#container').highcharts('StockChart', {
                          legend: {
                              enabled: true,
                              layout: 'vertical',
                              align: 'left',
                              verticalAlign: 'middle',
                              backgroundColor: '#000000',
                              borderColor: 'black',
                              borderWidth: 2,
                              shadow: true
                          },
                          title: {
                              text: '磁盘空间监控(GB)'
                          },
                         subtitle: {
                                text: host+'/'+ip,
                                style:{
                                     color:'#00CED1'
                                }
                         },
                           xAxis: {
                            title: {text: '磁盘空间'},
                            categories:data1,
                            labels: {
                                enabled: false
                            }

                        },
                          yAxis: [{
                              title: {
                                  text: ''
                              },
                              plotLines: [{
                                  value: 0,
                                  width: 1,
                                  color: '#808080'
                              }]
                          }],
                         //打开右上角下载图标
                          exporting: {
                              enabled: true
                          },
                       //关闭导航器
                  	    navigator : {
						enabled : false
                        },
                          series: [{
                              name: 'free',
                              type: 'column',
                              data: free
                          }, {
                              name: 'total',
                              type: 'column',
                              data: total
                          }]
                      }
              );
          });
      })
  }
</script>




